<template>
	<view class="uni-popup-dialog" v-if="showPopup">
		<view class="maskClass">
			<view class="uni-dialog-title" style="color: #6e6e6e;">
				<text class="uni-dialog-title-text" :class="['uni-popup__' + dialogType]" style="color: #6e6e6e;">{{ title }}</text>
			</view>
			<view class="dialog-content">
				<view class="dialog-content-text" v-if="tip">
					<h3 style="margin: 60rpx 0;">{{ tip }}</h3>
				</view>
				<view class="dialog-content-text" v-else>
					<h3>您已被管理员禁言</h3>
					<p>禁言结束时间：{{ endTime }}</p>
				</view>
			</view>
			<view class="uni-dialog-button-group">
				<view class="uni-dialog-button" @click="close"><text class="uni-dialog-button-text">确定</text></view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * PopUp 弹出层-对话框样式
 * @description 弹出层-对话框样式
 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
 * @property {String} value input 模式下的默认值
 * @property {String} placeholder input 模式下输入提示
 * @property {String} type = [success|warning|info|error] 主题样式
 *  @value success 成功
 * 	@value warning 提示
 * 	@value info 消息
 * 	@value error 错误
 * @property {String} mode = [base|input] 模式、
 * 	@value base 基础对话框
 * 	@value input 可输入对话框
 * @property {String} content 对话框内容
 * @property {Boolean} beforeClose 是否拦截取消事件
 * @event {Function} confirm 点击确认按钮触发
 * @event {Function} close 点击取消按钮触发
 */

export default {
	name: 'uniPopupDialogSilent',
	props: {
		value: {
			type: [String, Number],
			default: ''
		},
		placeholder: {
			type: [String, Number],
			default: '请输入内容'
		},
		tip: String,
		/**
		 * 对话框主题 success/warning/info/error	  默认 success
		 */
		type: {
			type: String,
			default: 'error'
		},
		/**
		 * 对话框模式 base/input
		 */
		mode: {
			type: String,
			default: 'base'
		},
		/**
		 * 对话框标题
		 */
		title: {
			type: String,
			default: '提示'
		},
		endTime: {
			type: String,
			default: ''
		},
		/**
		 * 对话框内容
		 */
		content: {
			type: String,
			default: ''
		},
		/**
		 * 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
		 */
		beforeClose: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			dialogType: 'error',
			focus: false,
			val: '',
			showPopup: false
		};
	},
	watch: {
		type(val) {
			this.dialogType = val;
		},
		mode(val) {
			if (val === 'input') {
				this.dialogType = 'info';
			}
		},
		value(val) {
			this.val = val;
		}
	},
	created() {
		// 对话框遮罩不可点击
		// this.popup.mkclick = false
		if (this.mode === 'input') {
			this.dialogType = 'info';
			this.val = this.value;
		} else {
			this.dialogType = this.type;
		}
	},
	mounted() {
		this.focus = true;
	},
	methods: {
		/**
		 * 点击确认按钮
		 */
		open() {
			this.showPopup = true;
		},
		/**
		 * 点击取消按钮
		 */
		close() {
			// if (this.beforeClose) {
			// 	this.$emit('close', () => {
			// 		this.showPopup.close()
			// 	})
			// 	return
			// }
			this.showPopup = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.uni-popup-dialog {
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 10;
}
.maskClass {
	background: #fff;
	width: 640rpx;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 12rpx;
	z-index: 10;
}
.uni-dialog-title {
	height: 122rpx;
	font-size: 36rpx;
	font-weight: 500;
	color: rgba(102, 100, 93, 1);
	line-height: 122rpx;
	border-bottom: 1px solid rgba(102, 100, 93, 0.1);
	text-align: center;
	margin: 0 24rpx;
}

.uni-dialog-title-text {
	font-size: 16px;
	font-weight: 500;
	color: #6e6e6e;
}

.dialog-content {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 5rpx 15rpx 15rpx 15rpx;
	text-align: center;
}

.dialog-content-text {
	font-size: 14px;
	color: #6e6e6e;
	display: block;
}

.dialog-content-text h3 {
	height: 42rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: rgba(102, 100, 93, 1);
	line-height: 42rpx;
	margin-top: 35rpx;
}

.dialog-content-text p {
	height: 37rpx;
	font-size: 26rpx;
	font-weight: 300;
	color: rgba(102, 100, 93, 1);
	line-height: 37rpx;
	margin: 12rpx 0 36rpx;
}

.uni-dialog-button-group {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	border-top-color: #f5f5f5;
	border-top-style: solid;
	border-top-width: 1px;
}

.uni-dialog-button {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */

	flex: 1;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 90rpx;
	background: rgba(255, 255, 255, 1);
	border-radius: 0 0 12rpx 12rpx;
}

.uni-border-left {
	border-left-color: #f0f0f0;
	border-left-style: solid;
	border-left-width: 1px;
}

.uni-dialog-button-text {
	font-size: 14px;
}

.uni-button-color {
	color: $uni-color-primary;
}

.uni-dialog-input {
	flex: 1;
	font-size: 14px;
}

.uni-popup__success {
	color: $uni-color-success;
}

.uni-popup__warn {
	color: $uni-color-warning;
}

.uni-popup__error {
	color: $uni-color-error;
}

.uni-popup__info {
	color: #909399;
}
</style>
